<template>
  <div class="personal-center-wrap">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      size="default"
      status-icon
      label-position="left"
    >
      <el-form-item prop="headPicture" label-width="0px">
        <div class="headPicture">
          <img :src="ruleForm.headPicture" alt="" />
        </div>
        <el-upload
          class="upload-demo"
          :http-request="submitUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :show-file-list="false"
        >
          <el-link type="primary">上传头像</el-link>
          <template #tip>
            <div class="el-upload__tip">
              只能上传 jpg/png 文件，且不超过 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户昵称" prop="username">
        <el-input
          style="max-width: 220px"
          v-model="ruleForm.username"
          placeholder="请输入昵称"
        />
      </el-form-item>
      <el-form-item label="简言" prop="saying">
        <el-input
        type="textarea" :rows="3"
          style="max-width: 220px"
          v-model="ruleForm.saying"
          placeholder="请输入简言"
        />
      </el-form-item>
      <el-form-item label-width="0px">
        <el-button type="primary" @click="submitForm('ruleFormRef')">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "utils/request";
export default {
  name: "JddChromePluginsPersonalCenter",
  data() {
    return {
      ruleForm: {
        headPicture:
          "https://img2.baidu.com/it/u=4260305631,2279598204&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=480",
        username: "",
        saying:''
      },
      rules: {
        headPicture: [
          {
            required: true,
            message: "请上传头像",
            trigger: "change",
          },
        ],
        username: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
         saying: [
          {
            required: true,
            message: "请输入简言",
            trigger: "blur",
          },
        ],
      },
      fileList: [],
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
    },
    async submitUpload(val) {
      const data = new FormData(); // 创建form对象
      data.append("file", val.file); // 通过append向form对象添加数据
      data.append("origin", "head-picture"); // 通过append向form对象添加数据
      const config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      let ret = await request.upload("/upload", data, config);
      if (ret.code == 200) {
        this.ruleForm.headPicture = ret.data;
      }
    },
    async submitForm(formEl) {
      if (!this.$refs[formEl]) return;
      await this.$refs[formEl].validate(async (valid, fields) => {
        if (valid) {
          console.log("submit!", this.ruleForm);
          let ret = await request.patch(`/user/${this.userInfo.id}`, {
            headPicture: this.ruleForm.headPicture,
            username: this.ruleForm.username,
            saying: this.ruleForm.saying,
          });
          if (ret.code == 200) {
            this.$store.dispatch("user/getUserInfo");
            this.$message({
              message: "修改成功",
              type: "success",
              showClose: true,
              duration: 1000,
            });
          }
        } else {
          console.log("error submit!", fields);
        }
      });
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
  },
  watch: {
    userInfo: {
      handler: function (newValue, oldValue) {
        this.ruleForm.headPicture = newValue.headPicture;
        this.ruleForm.username = newValue.username;
        this.ruleForm.saying = newValue.saying;
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss"  scoped>
.personal-center-wrap {
  padding: 20px;
  .headPicture {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>